<template>
	<view class="" style="height: 100vh;">
		<view class="container">
			<view class="nav-box" :style="{'height':'30vh'}">
				<!-- 自定义导航栏 -->
				<view class="status_bar" :style="{'height':statusBarHeight+'px'}">
					<!-- uni-ui这里是状态栏 -->
				</view>
				<!-- 胶囊位置信息 -->
				<view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}">
					<view class="nav-main-back" @click="goBack">
						<uni-icons type="back" size="26" color="#2c2c2c"></uni-icons>
					</view>
					<text class="nav-main-title">推流数据</text>
				</view>
			</view>
			<view class="content">
				<view class="content-price">
					<span class="content-price-title">可提现金额(元)</span>
					<view class="content-price-money">
						<span>￥</span>
						<span style="font-size: 40rpx;">{{ parseInt(allPrice) }}</span>.
						<span>{{ decimalPart }}</span>
					</view>
				</view>
				<view class="withdrawal-box">
					<view class="block_3 flex-col">
						<text class="text_7">提现金额</text>
						<view class="text-wrapper_4 flex-row justify-between">
							<input class="text_8" placeholder="请输入提现金额" type="number" v-model="price">
							<text class="text_9" @tap="allTi">全部提现</text>
						</view>
						<text class="text_10">提现至</text>
						<view class="group_1 flex-row">
							<view class="image-text_2 flex-row justify-between">
								<image class="label_1" referrerpolicy="no-referrer"
									:src="$wanlshop.oss('/uploads/20231023/weixintubiao.png')" />
								<text class="text-group_2">微信账户</text>
							</view>
							<text class="text_11">{{weixin}}</text>
							<text v-if="weixin" class="text_12" @tap="bindWx">更换</text>
							<text v-else class="text_12" @tap="bindWx">绑定</text>
						</view>
					</view>
				</view>
				<button class="text_2" @tap="cash">提现</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				weixin: '',
				//总高度
				height: 0,
				//胶囊位置信息
				menuButtonRect: {},
				//状态栏的高度
				statusBarHeight: 0,
				//导航栏的高度
				navBarHeight: 0,
				data: [],
				allPrice: '0.00', //可提现金额
				price: '', //提现金额
			}
		},
		mounted() {

		},
		computed: {
			//获取小数点后的数字
			decimalPart() {
				const decimalString = this.allPrice.toString();
				return decimalString.split('.')[1];
			}
		},
		created() {
			this.getHeight();
		},
		methods: {
			//获取屏幕导航栏高度
			getHeight() {
				if (wx.canIUse('getMenuButtonBoundingClientRect')) {
					let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 胶囊位置信息
					let rect = wx.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// 导航栏高度
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 自定义导航栏的高度
					this.height = sysInfo.statusBarHeight + navBarHeight;
				} else {
					wx.showToast({
						title: '您的微信版本过低，界面可能会显示不正常',
						icon: 'none',
						duration: 4000
					});
				}
			},
			goBack() {
				uni.navigateBack();
			},
			//提现
			cash(){
				console.log(this.price,999999999999);
			},
			//全部提现
			allTi(){
				this.price = this.allPrice
			},
			//绑定微信账户
			bindWx(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;

	}

	.nav-box {
		background-image: url('https://cdn.enjoysix.com/uploads/20231023/tuiliuback.png');
	}

	.nav-main {
		position: relative;

		.nav-main-back {
			position: absolute;
			left: 10rpx;
		}

		.nav-main-title {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333B53;
			line-height: 44rpx;
		}
	}

	.container {
		position: relative;

		.content {
			width: 100%;
			position: absolute;
			top: 240rpx;

			.content-price {
				padding: 0 36rpx 0;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.content-price-title {
					padding-bottom: 12rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #605C5B;
					line-height: 34rpx;
				}

				.content-price-money {
					font-size: 24rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #1C1C1C;
					line-height: 28rpx;
				}
			}
		}
	}

	.block_3 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 4px;
		width: 357px;
		align-self: center;
		margin-top: 22px;
		padding: 18px 18px 16px 18px;
	}

	.text_7 {
		overflow-wrap: break-word;
		color: rgba(28, 28, 28, 1);
		font-size: 12px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 17px;
		margin-right: 273px;
	}

	.text-wrapper_4 {
		width: 321px;
		margin-top: 29px;
		display: flex;
		justify-content: space-between;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #F1F1F1;
		margin-bottom: 24rpx;
	}

	.text_8 {
		overflow-wrap: break-word;
		color: rgba(177, 177, 177, 1);
		font-size: 16px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 22px;
	}

	.text_9 {
		overflow-wrap: break-word;
		color: rgba(226, 87, 64, 1);
		font-size: 12px;
		font-weight: NaN;
		text-align: right;
		white-space: nowrap;
		line-height: 17px;
		margin-top: 5px;
	}

	.image_2 {
		width: 321px;
		height: 1px;
		margin-top: 9px;
		margin-bottom: 12px;
	}

	.text_10 {
		overflow-wrap: break-word;
		color: rgba(28, 28, 28, 1);
		font-size: 12px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 17px;
		margin: 18px 285px 0 0;
	}

	.group_1 {
		margin-top: 9px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.image-text_2 {
		width: 81px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.label_1 {
		width: 24px;
		height: 24px;
	}

	.text-group_2 {
		overflow-wrap: break-word;
		color: rgba(28, 28, 28, 1);
		font-size: 12px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 17px;
		margin-top: 4px;
	}

	.text_11 {
		overflow-wrap: break-word;
		color: rgba(28, 28, 28, 1);
		font-size: 12px;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 17px;
		margin: 4px 0 0 8px;
	}

	.text_12 {
		overflow-wrap: break-word;
		color: rgba(226, 87, 64, 1);
		font-size: 12px;
		font-weight: NaN;
		text-align: right;
		white-space: nowrap;
		line-height: 17px;
		margin: 4px 0 0 138px;
	}

	.withdrawal-box {
		padding: 0 18rpx;
	}
	
	.text_2 {
		margin-top: 48rpx;
	  width: 692rpx;
	  height: 88rpx;
	  background: #E25740;
	  border-radius: 44rpx;
	  font-size: 32rpx;
	  font-family: PingFangSC-Regular, PingFang SC;
	  font-weight: 400;
	  color: #FFFFFF;
	}
</style>